<!doctype html>
<html>
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-132775238-1');
    </script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <script type="module" src="../rapidoc-min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
    <style>
      .size { width: 100px; height: 30px;  font-size:13px; margin: 0 2px; padding: 0 8px; border-radius: 2px; outline:none; color: #fff;}
      .btn { background-color: #2069e0; cursor:pointer; border: 1px solid transparent;}
      .txt {background-color: #2e2e2e; border: 1px solid #2069e0;}
      .table{ border:1px solid #444; border-collapse: collapse;}
      .table td{ font-size:12px; font-family: 'Roboto Mono'; border: 1px solid #444; padding:8px;}
      .table th{ font-size:11px; font-family: 'Open Sans'; border: 1px solid #444; padding:8px; background: #222;}
      datalist {
        background-color: #222;
        border: 1px solid #2069e0;
      }
      rapi-doc{
        width:100%;
      }
    </style>
  </head>
  <body>
    <rapi-doc id="thedoc"
    spec-url="../specs/auth.yaml"
    show-info = "true"
    theme = "dark"
    render-style="read" 
    show-header="false" 
    >
      <div slot='operations-top'>
        <div style="font-size:14px; border:0; background-color: #282828; border-radius:4px; padding:16px; margin:16px 75px">
          <h3>Programmatically Applying Security and Setting a API Server</h3>
          <div style="color:#777"> 
            *This section is not RapiDoc generated. It is user injected HTML/JS into a <span style="font-family:'Roboto Mono'"> &lt;slot&gt;</span> element to demonstrate how to programatically apply security keys
          </div>

          <div style="margin:24px 0 8px 0">
            RapiDoc provides you with two helper methods which you can use to supply security keys programatically. You can use one of these method based on the security scheme type
          </div>
          <table class="table" style="border:1px solid #444; font-family:'Roboto Mono'">
            <tr><th>SCHEME-TYPE</th><th>METHOD USED TO UPDATE</th></tr>
            <tr> <td>basic</td><td>setHttpUserNameAndPassword('http-basic', 'newUserName', 'newPassword')</td></tr>
            <tr> <td>other than basic</td><td style="border-bottom: 1px dashed #383838;" rowspan="3">setApiKey('api_key1', 'newApiToken')</td></tr>
          </table>

          <div style="margin:24px 0 8px 0">
            The table below list all the scurity schemes included in this spec. Check the corrosponding method that can be used to supply an access-token
          </div>
          <table class="table" style="border:1px solid #444; font-family:'Roboto Mono'">
            <tr><th>SECURITY SCHEME</th><th>SCHEME TYPE</th><th>METHOD USED TO UPDATE</th></tr>
            <tr> <td>http-basic</td><td>basic</td> <td>setHttpUserNameAndPassword('http-basic', 'newUserName', 'newPassword')</td></tr>
            <tr> <td>http-bearer</td><td>bearer</td> <td>setApiKey('http-bearer', 'newToken')</td></tr>
            <tr> <td>api_key1</td><td> <span style="color:#777"> (not-specified)</span></td> <td>setApiKey('api_key1', 'newToken')</td></tr>
            <tr> <td>api_key2</td><td> <span style="color:#777"> (not-specified)</span></td> <td>setApiKey('api_key2', 'newToken')</td></tr>
            <tr> <td>ms-oauth</td><td> <span style="color:#777"> (not-specified)</span></td> <td>setApiKey('ms-oauth', 'newToken')</td></tr>
            <tr> <td>api_key_cookie</td><td> <span style="color:#777"> (not-specified)</span></td> 
              <td> <span style="color:#777"> (wont work as this scheme sends api-key in a cookie, and rapidoc dont create/read cookies)</span></td>
            </tr>
          </table>

          <div style="margin:32px 0 16px 0; color:#777; font-weight:bold">
            Below form is used for taking user input and apply the security key using javascipt 
          </div>
          <table>
            <tr>
              <td> HTTP Basic</td>
              <td> 
                <input class='size txt' id='http-security-scheme-id' value="http-basic" type='text' placeholder='Security Scheme ID' spellcheck='false' style="width:120px"> 
                <input class='size txt' id='http-username' type='text' value="new-username"  placeholder='User name' spellcheck='false' > 
                <input class='size txt' id='http-password' type='text' value="new-pwd"  placeholder='Password' spellcheck='false' > 
                <button class='size btn' onclick='setSecurity(event, "http")'>Apply</button>
              </td>
            </tr>
            <tr>
              <td> API Key</td>
              <td>
                <select class='size txt' style="width:138px" id='api-security-scheme-id' placeholder='Security Scheme ID'>
                  <option value="api_key1">api_key1</option>
                  <option value="api_key2">api_key2</option>
                  <option value="http-bearer">http-bearer</option>
                  <option value="ms-oauth">ms-oauth</option>
                  <option value="invalid-key">invalid-key</option>
                </select>

                <input class='size txt' id='api-key-value' type='text' value="new-token"  placeholder='API Key Value' spellcheck='false' > 
                <button class='size btn' onclick='setSecurity(event, "apikey")'>Apply</button>
              </td>
            </tr>
            <tr>
              <td colspan="2"><button class='size btn' style="width:200px" onclick='clearSecurityKeys(event)'>Clear all Keys</button></td>
            </tr>  
          </table>
          <div style="margin:32px 0 16px 0; color:#777; font-weight:bold">
            Below form is used for programmatically setting the API server
          </div>  
          <div> Use <span style="font-family:'Roboto Mono'">setApiServer(serverUrl)</span> methode to set the API Server</div>  
          <table>
            <tr>
              <td> API Server Url</td>
              <td>
                <input class='size txt' id='server-url' value="https://reqres.in/api/" type='text' placeholder='A Valid server url thats defined in this spec' spellcheck='false' style="width:290px"> 
              </td>
              <td colspan="2"><button class='size btn' style="width:110px" onclick='setApiServer(event)'>Set API Server</button></td>
            </tr>  
          </table>
        </div>
      </div>  
    </rapi-doc>
    <script>
      function setApiServer(ev) {
        const docEl = document.getElementById('thedoc');
        const trEl = ev.target.closest('tr');
        const serverUrl = trEl.querySelector('#server-url').value;
        result = docEl.setApiServer(serverUrl);
        ev.target.innerText = result ? 'Applied !' : 'Failed';
        ev.target.style.backgroundColor = result ? 'green' : 'orangered';
        window.setTimeout(function(){
          ev.target.innerText = 'Apply';
          ev.target.style.backgroundColor = '#2069e0';
        }, 5000)

      }

      function clearSecurityKeys(ev) {
        const docEl = document.getElementById('thedoc');
        docEl.removeAllSecurityKeys();
      }

      function setSecurity(ev, securityType) {
        const docEl = document.getElementById('thedoc');
        const trEl = ev.target.closest('tr');
        let result;
        if (securityType === 'http') {
          const securitySchemeId = trEl.querySelector('#http-security-scheme-id').value;
          const username = trEl.querySelector('#http-username').value;
          const password = trEl.querySelector('#http-password').value;
          result = docEl.setHttpUserNameAndPassword(securitySchemeId, username, password);
        } else if (securityType === 'apikey') {
          const securitySchemeId = trEl.querySelector('#api-security-scheme-id').value;
          const newApiToken = trEl.querySelector('#api-key-value').value;
          result = docEl.setApiKey(securitySchemeId, newApiToken);
        } else if (securityType === 'oauth2') {
          const securitySchemeId = trEl.querySelector('#oauth-security-scheme-id').value;
          const newApiToken = trEl.querySelector('#oauth-key-value').value;
          result = docEl.setApiKey(securitySchemeId, newApiToken);
        }
        ev.target.innerText = result ? 'Applied !' : 'Failed';
        ev.target.style.backgroundColor = result ? 'green' : 'orangered';
        window.setTimeout(function(){
          ev.target.innerText = 'Apply';
          ev.target.style.backgroundColor = '#2069e0';
        }, 5000)
      }
    </script>

  </body>
</html>